<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>


    <script type="text/babel">
        // jsx - component (function) - component(class) - components - component tree - app (项目)
       
        // 01  函数组件定义
        // function Welcome(){
        //     return <h1>hello world</h1>
        // }

        // const e = <Welcome></Welcome>

        //02  函数组件传值 : 属性传值
        function Welcome(props){
            // props : 正常属性传值 & 子元素children: 'aa'
            console.log(props);

            // return <h1>hello world</h1>
            
            // Objects are not valid as a React child =>具体的值 不能是一个对象
            // return <h1>hello {props}</h1>
            
            // return <h1>hello {props.name}</h1> 
            
            //结构模式
            const {children,name} = props
            // return <h1>hello {children+name}</h1> 
            return <h1>hello {children} {name}</h1> 

        }
        // const e = <Welcome></Welcome>
        // const e = <Welcome name='jack'></Welcome>

        //03  属性传值：默认children
        // const e  = 
        // <div>
        //     <h1>hello page</h1>
        //     <Welcome />
        //     <Welcome >Mr.</Welcome>
        //     <Welcome name='jack'>Mr.</Welcome>
        // </div>


        //04 创建元素：函数组件&虚拟DOM分析

        // const e  = 
        // <div>
        //     <h1>hello page</h1>
        //     <Welcome name='jack'>Mr.</Welcome>
        // </div>

        //createElement 创建
        // React.createElement("div", null,
        //  React.createElement("h1", null, "hello page"), 
        //  React.createElement(Welcome, { //jsx =: js + xml(包含html + 自定义标签)
        //     name: "jack"}, "Mr."));

        // console.log(e)

        // {
        //     type:'div',
        //     props:{
        //         children:[
        //             {
        //                 type:'h1',
        //                 props:{children:'hello page'}
        //             },
        //             {
        //                 type:ƒ Welcome(props),
        //                 props:{children:'hello page'}
        //             }
        //         ]
        //     }
        // }

        // 05 PURE : 纯函数  ： function fn(props){return value} 传入相同的值 返回值不能改变；
        // function sum(a,b){
        //     return a + b
        // }
        // console.log(sum(1,2));
        // console.log(sum(1,2));
        // console.log(sum(1,2));

        // 不是纯函数 ： 传入相同的值 返回值可能能改变；
        // let p = 0
        // function sum(a,b){
        //     a = ++p
        //     return a + b
        // }
        // console.log(sum(1,2));
        // console.log(sum(1,2));
        // console.log(sum(1,2));

        var e ;
        //  e  = <Welcome name='jack'>Mr.</Welcome>
         e  = <Welcome name='jack'>Mr.</Welcome>
        //  e  = <Welcome name='jack'>Mr.</Welcome>

       // 判断：type  
       // 如果 函数  自动执行函数，同时props 传入函数  =>真实DOM =>渲染容器中
      //  如果 是正常标签 =>   真实DOM =>渲染容器中
        ReactDOM.render(e,document.getElementById('app'))
    </script>
</body>
</html>